<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>用户管理系统</title>
	<link href="SignIn.css" rel="stylesheet" type="text/css">
	<link href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body onmousedown="mouseposition()">
	<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom box-shadow">
	    <h5 class="my-0 mr-md-auto font-weight-normal"><b>Js</b> 课程设计</h5>
    </div>
	<div id="login">
			<h1>注册</h1>
		<form name="Userform" onsubmit="return main()">
		<p>
			<input type="text" placeholder="用户名" id="Username" name="Username" required="required"></input>
		</p>
		<p>
			<input type="email" placeholder="邮箱" id="Email" name="Email" required="required"></input>
		<p>
			<input type="password" placeholder="密码" id="Password" name="Password" required="required" ></input>
		</p>
		<p>
			<input type="password" placeholder="确认密码" id="Password_comfirm" name="Password_comfirm" required="required"></input>
		</p>
		<p>
			<input type="submit" name="SignIn" value="注册" id="Submit"></input>
		</p>
		<p>
			<input type="text" id="Pos" name="Pos" placeholder="鼠标位置"></input>
		</p>
		</form>
	</div>
	</body>
	<script>	
		function main() {
			var username = $("#Username").val(),
				password = $("#Password").val(),
				password_comfirm = $("#Password_comfirm").val(),
				email = $("#Email").val();
		if (password != password_comfirm){
			alert("两次密码不一致！");
			return false;
 		}	
		else if (password.length < 6){
			alert("密码太短！");
			return false;
		}
		else{
			if (!window.localStorage){
				alert("不支持localStorage~");
				return false;
			}else {
			date = new Date();
			var data = {
				"password" : password,
				"email" : email,
				"date" : date
				};
			d = JSON.stringify(data);
			if (localStorage.getItem(username)){
				alert("用户名已存在！");
				return false;
			}
			alert("注册成功！");
			localStorage.setItem(username, d);
			window.location.href="LogIn.html?username=" + username;
			window.event.returnValue= false;
			return ture;}}}
		function mouseposition (){
			P = document.getElementById('Pos');
			P.value = "鼠标位置:第" + window.event.x + "行" + window.event.y + "列";
		}
	</script>
</html>